<template>
  <div>
    <!-- 头部 -->
    <!-- 头部 -->
    <div class="search">
      <a-form
        style="padding-top: 20px"
        ref="formRef"
        :rules="rules"
        :model="form"
        :hideRequiredMark="true"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <a-col :span="10" :lg="10" :xs="24" :md="10">
            <a-form-item label="认证状态">
              <a-row style="align-items: center">
                <a-col
                  :span="5"
                  v-for="(item, index) in statusList"
                  :offset="index == 0 ? 1 : ''"
                  :class="index == statusAct ? 'act-font-color' : ''"
                  @click="chooseStatus(item.status, index, item.subStatus)"
                  :key="item.status"
                  >{{ item.title }}
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="10" :md="6">
            <a-form-item>
              <a-range-picker
                v-model:value="time"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="6" :md="4">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="formModel.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="2" :offset="1">
            <a-button type="primary" @click="buttonSearch" class="d-a-center">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 列表 -->
    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540,x:'auto' }" -->
      <template #status="{ record }">
        <a-tag :color="nurseStatusColor[record.status]">{{ nurseStatus[record.status] }}</a-tag>
      </template>
      <template #care="{ record }">
        <a-text>
          {{ nurseType[record.identity] }}
        </a-text>
      </template>
      <template #operation="{ record }">
        <a-button type="link" v-has="{ a: $route, b: 1 }" @click="look(record.id, 0)">查看</a-button>
        <a-button type="link" v-if="record.status == 1" @click="deal(record.id, 1)" v-has="{ a: $route, b: 2 }">审核 </a-button>
      </template>
    </a-table>

    <!-- 审核弹窗 -->
    <template v-if="detailVisible">
      <careCertificationDetail :visible="detailVisible" :isEdit="isEdit" :id="id" @closeModal="closeModal"> </careCertificationDetail>
    </template>
    <!-- 新增编辑角色 -->
    <!-- <addModal v-model:visible="visible" :id="id" @closeModal="closeModal"/> -->
  </div>
</template>
<script>
import { reactive, ref, watch, computed, createVNode, toRefs } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, dataObj } from './data'
// import addModal from './components/addModal.vue'
import { addressBookList, deleteAddressBook } from '@/api/setting/index'
import { selectAllNurseInfoCheck } from '@/api/buisness/index.js'

import careCertificationDetail from '@/views/business/components/careCertificationDetail.vue'

import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable } from '@/hooks'
import { nurseType } from '@/utils/dict.js'
export default {
  components: {
    careCertificationDetail
  },
  setup() {
    const columns = columnsArr

    const data = reactive(dataObj)
    // 选择时间
    const panelChange = (date, dateString) => {
      formModel.value.startTime = dateString[0]
      formModel.value.endTime = dateString[1]
    }

    //必须有括号 建议箭头函数 防止深拷贝
    const getParams = () => ({
      identity: [4]
    })

    const { renderData, formModel, loading, pagination, buttonSearch, handleSearch, handleTableChange } = useTable({
      api: selectAllNurseInfoCheck,
      getParams
    })

    handleSearch(1)

    //  删除
    const chooseStatus = (status, index, subStatus) => {
      if (data.statusAct == index) return
      data.statusAct = index
      if (index == 0) {
        formModel.value.status = ''
        formModel.value.subStatus = ''
      } else {
        formModel.value.status = status
        formModel.value.subStatus = subStatus
      }
      handleSearch()
    }
    // 查看
    const look = (key, isEdit) => {
      data.id = key
      data.detailVisible = true
      data.isEdit = 0
    }

    // 审核
    const deal = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 1
      data.id = key
    }

    const closeModal = () => {
      data.detailVisible = false
      handleSearch()
    }
    return {
      ...toRefs(data),
      nurseType,
      columns,
      renderData,
      formModel,
      loading,
      deal,
      look,
      pagination,
      handleSearch,
      handleTableChange,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      panelChange,
      closeModal,
      chooseStatus,
      buttonSearch
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
